<!-- 提交订单 -->
<template>
	<view class="publish-submitBox">
		<view class="top">
			<view class="left">
				<view class="left-top">
					<text>￥</text>
					<text class="money">{{parseFloat((money * formData.quota).toFixed(10))}}</text>
					<text>元</text>
				</view>

				<text class="left-botton">
					注·发单需{{money}}/人预约金 {{time}}分钟无人接单自动退款
				</text>
			</view>
			<view class="right" @click="submit1">
				提交订单
			</view>

		</view>

		<payMode :show="typeShow" @close="typeShowClose" @submit="payModeSubmit"></payMode>
	</view>
</template>

<script>
	// api请求
	import {
		activityAddApi, // 新增活动
		systemConfigApi, // 获取系统信息
	} from '@/api/activity.js'

	// 公共方法
	import {
		wxPayment, // 微信支付
	} from '@/utils/wx/wxPublick-h5.js'
	import {
		wxPaymentWeiXin
	} from '@/utils/wx/wxPublick-weixin.js'

	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},

			setPageData: {
				type: Function,
				default: () => {}
			},

			project: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				//续时支付方式弹窗
				typeShow: false,

				// 支付数据
				formData: {},

				money: 0, // 需要支付的钱

				time: 0, // 退款时间

				paymentStatus: false, //是否支付了
			};
		},
		watch: {

			/**
			 * 获取formData
			 */
			data: {
				handler() {
					if (Object.keys(this.data).length > 0) {
						this.formData = this.data
					}
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			/**
			 * 最低佣金
			 */
			suggestMoney() {
				return this.project.activityPrice * this.data.duration
			}
		},
		created() {
			this.init()
		},
		methods: {
			/**
			 * 初始化
			 */
			async init() {
				// 获取定金金额，单位/每人
				this.money = await this.systemConfig('activity_earnest_amount')

				// 活动自动退定金时间，单位分钟
				this.time = await this.systemConfig('activity_auto_refund_time')

			},

			/**
			 * 获取系统信息
			 */
			async systemConfig(params) {
				try {
					const res = await systemConfigApi(params)

					if (res.code !== 200) {
						return this.$public.showText(res.msg || '请求错误')
					}

					return typeof(res.data) === 'string' ? Number(res.data) : res.data
				} catch (e) {
					console.log(err);
				}
			},


			/**
			 * 提交
			 */
			submit1() {
				// 如果已经支付了就不再打开弹窗
				if (this.paymentStatus) {
					return
				}

				this.typeShow = true




			},

			/**
			 * 支付前的验证
			 */
			verifyData() {
				let str = null
				for (let key in this.formData) {
					if (key !== 'payType') {
						switch (key) {
							case 'address':
								if (this.formData[key] === '') str = '请选择活动地点'
								break;
							case 'latitude':
								if (this.formData[key] === '') str = '请选择活动地点';
								break;
							case 'longitude':
								if (this.formData[key] === '') str = '请选择活动地点';
								break;
							case 'phoneCode':
								if (this.formData[key] === '') str = '请选择城市';
								break;

							case 'quota':
								if (this.formData[key] === '') str = '请输入所需人数';
								break;
							case 'gender':
								if (this.formData[key] === '') str = '请选择性别'
								break;
							case 'contact':
								if (this.formData[key] === '') str = '请输入联系人';
								break;
							case 'phone':
								if (this.formData[key] === '') str = '请输入联系电话';
								break;

								// 备注可以为空
								// case 'remark' : this.formData[key] === '' && str = '请输入备注';
								// break;
							case 'type':
								if (this.formData[key] === '') str = '请选择约玩项目';
								break;

							case 'duration':
								if (this.formData[key] === '') str = '请选择约玩时长';
								break;

							case 'startTime':
								if (this.formData[key] === '') str = '请选择活动开始时间';
								break;

							case 'commissionAmount': {

								if (this.formData[key] === '') {
									str = '请输入佣金'
								}

								if (Number(this.formData[key]) < this.suggestMoney) {
									str = '佣金不能低于' + this.suggestMoney + '元/人'
								}
							}
							break;
							case 'payType':
								if (this.formData[key] === '') str = '请选择支付方式';
								break;
						}
					}

				}

				if (str !== null) {
					uni.showToast({
						duration: 3000,
						icon: 'none',
						title: str
					})


				}


				return str;
			},

			/**
			 * 关闭支付方式弹窗
			 */
			typeShowClose() {
				this.typeShow = false
			},


			/**
			 * 确认支付方式
			 */
			async payModeSubmit(val) {

				// 校验是否为空
				const verify = await this.verifyData()
				if (verify !== null) {
					return
				}
				
				this.formData.payType = val

				this.$emit('setPageData', this.formData)
				
				const res = await activityAddApi(this.formData)
				this.paymentStatus = true
				if (res.code !== 200) {
					uni.showToast({
						duration: 3000,
						icon: 'none',
						title: res.msg || '请求失败'
					})
					return
				}

				// 等于0就是余额提交，就不用再调起支付了
				if (val === 0) {
					this.$public.showText('支付成功')
					uni.navigateTo({
						url: '/pages/publishTab/publishResult/publishResult'
					});
				}

				// 等于1是微信支付
				if (val === 1) {
					// 支付
					wxPaymentWeiXin({
						data: res.data.result.jsConfig,
						successType: '/pages/publishTab/publishResult/publishResult'
					}, 1)

				}

			},
		}
	}
</script>

<style lang="less" scoped>
	.publish-submitBox {
		.top {
			#flex(-, center, center);
			#box(100%, 100rpx, 50rpx);
		}


		.left {
			#box(0, 100%, 100rpx 0 0 100rpx, #212526);
			#padding(0 24rpx);
			#flex(column, center, flex-start);

			flex: 1;

			.left-top {
				#font(28rpx, #fff);

				.money {
					font-size: 36rpx;
				}
			}

			.left-botton {
				#font(22rpx, rgba(#fff, .6));
				margin-top: 12rpx;
			}
		}

		.right {
			#box(24%, 100%, 0 100rpx 100rpx 0, #FEDE28);
			#flex(-, center, center);
			#font(32rpx, #333, 600);
		}
	}
</style>